<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="flip-container">
        <div class="flipper">
          <div class="front">
            111111
          </div>
          <div class="back">
           222222
          </div>
        </div>
      </div>
      <style>
        /* 卡片容器样式 */
.flip-container {
  perspective: 1000px;
  position: relative;
}

/* 卡片翻转元素样式 */
.flipper {
  position: absolute;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: all 0.5s ease-in-out;
}

/* 卡片正面元素样式 */
.front,
.back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden; /* 隐藏背面 */
}

/* 卡片正面元素样式 */
.front {
  z-index: 2;
  transform: rotateY(0deg);
}

/* 卡片反面元素样式 */
.back {
  transform: rotateY(-180deg); /* 初始化为反面 */
}

.flip-container:hover .flipper {
  transform: rotateY(180deg);
}
.flip-container:hover .flipper,
.flip-container.hover .flipper {
  transform: rotateY(0deg);
}
.flip-container.flipped .flipper {
  transform: rotateY(180deg);
}
.flip-container.flipped .flipper {
  transform: rotateY(180deg);
}

.flip-container.flipped .flipper .back {
  transform: rotateY(0deg);
}

.flip-container {
  perspective: 1000px; /* 透视效果 */
  position: relative; /* 设置相对定位 */
  text-align: center; /* 水平居中 */
}
.flip-container.flipped .flipper {
  transform: rotateY(180deg);
}
.flip-container.flipped .flipper .back {
  transform: rotateY(0deg); /* 设置反面元素旋转 */
}

      </style>
</body>
</html>